<template>
     <div class="view-wrap">
        <div class="search-box">
            <el-form inline>
                <el-form-item label="图标名称">
                    <el-input v-model.trim="queryParams.name" placeholder="请输入图标名称" clearable />
                </el-form-item>
            </el-form>
        </div>
        <div class="view-content">
            <div class="operation-group">
                <el-button type="primary" @click="handleOpenIconEditor(null)">新增</el-button>
            </div>
            <el-table :data="tableData" height="calc(100vh - 310px)" style="width: 100%">
                <el-table-column prop="name" label="名称" />
                <el-table-column prop="图标" label="iconUrl">
                    <template #default="scope">
                        <el-avatar shape="square" :size="50" :src="scope.row.iconUrl" fit="contain" />
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" />
                <el-table-column prop="description" label="描述" />
                <el-table-column prop="name" label="操作" width="200">
                    <template #default="scope">
                        <el-link type="primary" style="margin-right: 5px;" @click="handleOpenIconEditor(scope.row)">编辑</el-link>
                        <el-link @click="handleDelete(scope.row)" type="danger">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
            
            
        </div>
       
    </div>
    <iconEditor :edit-data="iconData" :visible="iconEditorVisible" @close="handleIconEditorClose" />
</template>
  
<script setup lang="ts">
import { ref, reactive, watch, onMounted, computed } from 'vue';
import { getIconList, deleteIcon } from '@/api/icon';
import iconEditor from './iconEditor.vue';
import { ElMessage, ElMessageBox } from 'element-plus'

const queryParams = reactive({
    name: ''
})

const iconEditorVisible = ref(false);
const iconData = ref(null);

let tableOriginData = ref([]);

function handleOpenIconEditor(data){
    iconData.value = data;
    iconEditorVisible.value = true;
}
getTableList();

function handleIconEditorClose(type){
    iconEditorVisible.value = false;
    if(type == 'update'){
        getTableList();
    }
}

function getTableList(){
    queryParams.name = '';
    getIconList().then(res=>{
        tableOriginData.value = res.data;
    })
}

const tableData = computed(()=>{
    return tableOriginData.value.filter(item=>item.name.includes(queryParams.name));
})

function handleDelete(row){
    ElMessageBox.confirm('确认删除此图标吗？','提示',{
        type: 'warning',
    }).then(()=>{
        deleteIcon(row.id).then(res=>{
            getTableList();
        })
    })
}

</script>

<style lang="scss" scoped>

</style>

